<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=320, user-scalable=0"/>
  <meta name="viewport" content="minimum-scale=1, maximum-scale=1"/>
  <title>iFreecell for iPhone and iPod touch</title>
  <link rel="stylesheet" href="freecell.css" type="text/css" media="all"/>
  <script src="ianime029-all.js"></script>
  <script type="text/javascript">
// Game Parameters (const, static)
var iconSize = 40;
var rows = 8;
var cols = 8
var images = ["map","photo","clock","ipod","tools","browser","weather","graph"];

// Global variables (initialized only once and remain constant)
var anime = new iAnime();
var seed = (function() {
               var d = new Date();
               return d.getDate() + 30*d.getMonth() + 366*(d.getYear() % 1900);
            })();
var auto = false;  // "auto" play mode

// Global variables (initialized once, but keep changing)
var cells = [[],[],[],[],[],[],[],[]];
var hiscore = {
    score: 0,
    moves: []
};

// Global variables (initialized in init())
var rnd;
var remain;
var score;
var moves;

// Called on body.onLoad as well as when the user clicks "replay"
function init()
{
    for (var col=0; col<cols; col++) {
        for (var row=0; row<rows; row++) {
            var obj;
            if (obj=cells[col][row]) {
                document.body.removeChild(obj);
                cells[col][row] = null;
            }
        }
    }
    var d = new Date();
    var div = document.getElementById('hiscore');
    iBrowse.setText(div, 'HI: ' + hiscore.score); 
console.log(seed);
    rnd = seed;
    score = 0;
    moves = [];
    addScore(0);
    remain = rows * cols;
    fillCells(true);
}

function checkCell(index, col, row)
{
    if (row>=rows || row<0 || col>=cols || col<0) return 0;
    var obj = cells[col][row];
    if (!obj || index != obj.index) return 0;
    return removeCell(obj, false);
}

function removeCell(obj, first)
{
  cells[obj.col][obj.row] = null;
  var count = checkCell(obj.index, obj.col, obj.row+1)
           + checkCell(obj.index, obj.col, obj.row-1)
           + checkCell(obj.index, obj.col+1, obj.row)
           + checkCell(obj.index, obj.col-1, obj.row);
  if (!first || count>0) {
    var param = { 
        element:    obj, 
        duration:   300,
        effect:     'fadeout', 
        remove:     true,
        onComplete: function(item) {
                      if (first) fillCells(false);
                    }
    };
    anime.add(param);
    remain--;
    count++;
  } else {
    cells[obj.col][obj.row] = obj;
  }
  return count;
}

function onClick(obj)
{
    var move = [obj.col, obj.row];
    anime.pause(true);
    var count = removeCell(obj, true);
    if (count) {
        moves.push(move);
        addScore((count*(count-1))/2, 
            obj.offsetLeft, obj.offsetTop, " pt");
    }
    anime.pause(false);
}

function addCell(col, extra)
{
    var obj = document.createElement("img");
    obj.index = Math.floor(rnd / 13) % 3;
    rnd = (rnd*9301 + 49297) % 233280;
    obj.col = col;
    obj.src = "images/"+images[obj.index]+"_40.png";
    obj.style.position = "absolute";
    obj.style.left = (320-iconSize*cols)/2+iconSize*col+"px";
    obj.style.top = (-iconSize*extra)+"px";
    obj.onclick = function() {
                      if (!auto) onClick(this); 
                  };
    document.body.appendChild(obj);
    return obj;
}

function addScore(points, x, y, text)
{
  if (points!=0) {
    var div = document.createElement("div");
    iBrowse.setText(div, points + text);
    div.style.position = 'absolute';
    div.style.left = (x + iconSize/2) + "px";
    div.style.top = y + "px";
    div.style.padding = '3px';
    div.style.background = (points>0) ? '#00ff00' : '#ff0000';
    document.body.appendChild(div);
    var param = { 
          element:    div, 
          x:          div.offsetLeft + iconSize/2,
          y:          div.offsetTop - 20,
          duration:   1200, 
          effect:     'fadeout', 
          remove:     true
          };
    anime.add(param);

    score += points;
  }
    div = document.getElementById('score');
    iBrowse.setText(div, 'SC: ' + score); 
}

function fillCells(first)
{
  anime.pause(true);
  for (var col=0; col<cols; col++) {
    var extra = 0;
    for (var row=0; row<rows; row++) {
      if (!cells[col][row]) {
         var obj = null;
         for (k=row+1; k<rows; k++) {
            if (obj = cells[col][k]) {
               cells[col][k] = null;
               break;
            }
         }
         if (first && !obj) {
            obj = addCell(col,++extra);
         }
         if (obj) {
            obj.row = row;
            cells[col][row] = obj;
            var top = 322 - (row+1)*iconSize;
            var param = { 
                element:  obj, 
                y:        top, 
                duration: Math.sqrt(top - obj.offsetTop)*100,
                effect:   'bounce'
             };
             anime.add(param);
         } else {
             break;
         }
      }
    }
    if (!cells[col][0]) {
        if (shiftCol(col)) {
            col--;
        }
    }
  }
  checkEnd();
  anime.pause(false);
  if (auto) {
    var turn = moves.length;
    if (turn < hiscore.moves.length) {
        var obj = cells[hiscore.moves[turn][0]][hiscore.moves[turn][1]];
        setTimeout(function(){onClick(obj);}, 2000);
    } else {
        auto = false;
    }
  }
}

function shiftCol(col0)
{
    var any = false;
    for (var col=col0; col<cols-1; col++) {
       for (var row=0; row<rows; row++) {
          var obj = cells[col+1][row];
          if (obj) {
             any = true;
             cells[col][row] = obj;
             cells[col+1][row] = null;
             obj.col = col;
             obj.style.left = (322-iconSize*cols)/2+iconSize*col+"px";
          }
       }
    }
    return any;
}

function checkEnd()
{
    var over = false;
    if (!cells[0][0]) {
        addScore(50, 0, 322-iconSize*3/2, " bonus pt!");
        over = true;
    } else {
        var match=false;
        for (var col=0; !match && col<cols-1; col++) {
            for(var row=0; row<rows-1 && cells[col][row]; row++) {
               index = cells[col][row].index;
               if (cells[col][row+1] && cells[col][row+1].index==index) { 
                   match=true;
                   break;
               }
               if (cells[col+1][row] && cells[col+1][row].index==index) { 
                   match=true;
                   break;
               }
            }
        }
        if (!match) {
            addScore(-remain * (remain+1)/2, 
                0, 322-iconSize*3/2, " penalty pt!");
            over = true;
        }
    }
    if (over && score>hiscore.score) {
        hiscore.score = score;
        hiscore.moves = moves;
        var div = document.getElementById('hiscore');
        iBrowse.setText(div, 'HI: ' + hiscore.score); 
    }
}

function autoplay()
{
    auto = true;
    init();
    menu(false);
}

function menu(show)
{
    var obj = document.getElementById("menu");
    if (show) {
        obj.style.visibility = "visible";
    } else {
        obj.style.visibility = "hidden";
    }
}
  </script>
</head>
<body onload="init()">
  <div id="statusbar">
    <span id="score" ></span>
    <span id="hiscore" ></span>
    <input id="gomenu" type="button" value="Menu" onclick="menu(true)" />
    <input id="replay" type="button" value="Reset" onclick="init()" />
  </div>
  <div id="menu">
    <a href="index.html">Top</a>
    <a href="javascript:autoplay()">Autoplay "HI"</a>
    <a id="permalink" href="temp.html">Permalink with "HI"</a>
    <a href="http://satoshi.blogs.com">About</a>
    <a href="javascript:menu(false)">Close</a>
  </div>
</body>
</html>
